<template>
  <div>
    <!-- <VModel
    :background="backgroundColor"
    @setBackground="backgroundColor = $event"
    /> -->

    <!-- <VModel
    @input="backgroundColor = $event"
    :value="backgroundColor"
    /> -->
    <!-- <VModel
    v-model="backgroundColor"
    /> -->
    <!-- v-model -->
    <!-- 会在组件上解析一个 input 事件 -->
    <!-- 还会解析一个value 属性 :value="backgroundColor" -->

    <!-- <VModel
    :background.sync="backgroundColor"
    /> -->
    <!-- 可以使用多次 -->
    <!-- 解析规则 -->
    <!-- :background="backgroundColor" -->
    <!-- @update:background="backgroundColor = $event" -->
    <router-view />
    <!-- <button @click="setList">修改</button>
    <button @click="setName">修改姓名</button>
    <ul>
      <li v-for="item in newList" :key="item">{{ item }}</li>
    </ul>
    姓名: {{ person.name }} -->
  </div>
</template>

<script>
// import VModel from '@/sgComponents/VModel.vue'
export default {
  data () {
    return {
      // 数据响应式 数据 变 视图变
      // 有两种情况比较特殊
      // 1. 数组通过数组索引(小标) 直接去修改数据 数据不是响应式的 数据会变但是不会影响到视图
      // 2. 对象新增的属性
      list: [1, 2, 3, 4],
      person: {},
      backgroundColor: 'red'
    }
  },

  components: {
  },

  computed: {
    newList () {
      return this.list.filter(item => item % 2 === 0)
    }
  },

  created () {

  },

  methods: {
    setList () {
      // this.list[1] = 5
      // 修改的是数组
      // 第一个参数: 要修改的数组
      // 第二个参数: 索引
      // 第三个参数: 修改的值
      this.$set(this.list, 1, 5)
    },
    setName () {
      // this.person.name = '张三'
      // 第一个参数: 对象
      // 第二个参数: key
      // 第三个参数: value
      this.$set(this.person, 'name', '张三')
    }
  }
}
</script>

<style scoped>

</style>
